<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<!-- 先引入react,再引入react-dom,因为react是核心库，react-dom是扩展库 -->
<!-- 引入以后全局多了一个REACT和ReactDOM对象 -->
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<!-- 用于将jsx转为js -->
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<style>
    .list {
      width: 200px;
      height: 150px;
      background-color: skyblue;
      overflow: auto;
    }
    .news {
      height: 30px;
    }
</style>
<body>
<!-- 准备好一个容器 -->
<div id="example"></div>
<div id="example1"></div>
<div id="example2"></div>
<!-- 此处一定要写babel，不写就是默认js -->
<script type="text/babel">

class Person extends React.Component {
 
  state = {
    persons: [
      {id:1,name:"小张", age:18},
      {id:2,name:"小李",age:19}
    ]
  }

  add = () => {
    const {persons} = this.state
    const p = {id:persons.length+1,name:"小王",age:20}
    this.setState({
      persons:[p,...persons,]
    })
  }
  /*
      为什么key不取index的原因
      旧虚拟DOM中找到了与新虚拟DOM相同的key:
        1.若虚拟dom内容没变，直接使用之前的真实dom
        2.若虚拟dom中内容变了，则生成新的真实dom，随后替换掉页面中之前的真实dom
      旧虚拟dom中未找到与新虚拟dom相同的key
        根据数据创建新的真实dom，随后渲染到页面
      虚拟dom是没有value值得，只有放到了页面上我们才可以输入value值

      用index作为key可能会引发的问题
        1.若对数据进行：逆序添加，逆序删除等破坏顺序操作
            会产生没有毕业的真实dom更新 ==> 界面效果没问题，但效率低
        2.如果结构中还包含输入类的DOM
            会产生错误DOM更新 ==> 界面有问题
        3.注意！如果不存在对数据的逆向添加，逆序删除等破坏顺序操作
            仅用于渲染列表用于展示，使用index作为key是没问题的
  
  */
  render(){
    return (
      <div>
        <h2>展示人员信息</h2>
        <button onClick={this.add}>添加一个小王</button>
        <ul>
          {
            this.state.person.map((personObj,index) => {
              return <li key={index}>{personObj.name}---{personObj.age}</li>
            })
          }
        </ul>
      </div>
    )
  }
} 





ReactDOM.render(
	<Time/>,
	document.getElementById('example')
);

</script>

</body>
</html>